<template>
	<div id="cake">
		<div id="box" v-for="item in ar" :key="ar.goods_id">
			<router-link class="rou" :to="'/goodscontent?id='|fil(item.goods_id)">
				<div>{{item.goods_name}}
				</div>
				<!-- <span id="">
					{{$store.state.url + item.goods_coverimg }}
				</span> -->
				<img :src="$store.state.url + item.goods_coverimg">
			</router-link>
			<div class="money-father">
				<span id="money">
					{{item.goods_price}}￥
				</span>
				<img :src="$store.state.url+'/img/lfximg/homecar.png'" @click="changeisclickcar(item.goods_id)">
				<!-- <router-link to="/bomb">
					<img :src="$store.state.url+'/img/lfximg/homecar.png'" @click="changeisclickcar(item.goods_id)">
				</router-link> -->
			</div>
			<addCar v-if="$store.state.isclickcar">
				<template slot="cancel"><span @click="changeisclickcar">取消</span></template>
			</addCar>
		</div>

	</div>
</template>

<script>
	import addCar from "../ljy/addcar/addcar.vue" 
	export default {
		props: ["ar"],
		components: {
			addCar
		},
		filters: {
			fil(n1, n2) {
				return n1 + n2;
			}
		},
		methods: {
			changeisclickcar(goods_id) {
				this.$store.commit("changeGoodsid", goods_id);
				this.$store.commit("changeIsclickcar");
			},
		},
		
	}
</script>

<style scoped="scoped" lang="scss">
	* {
		text-decoration: none;
	}

	#cake {
		width: 1157px;
		margin-top: 90px;
		display: flex;
		flex-wrap: nowrap;
		border-bottom: 3px solid gray;
		margin: 0 auto;
	}

	#box {
		width: 350px;
		height: 350px;
		background-color: #F5F5F5;
		padding: 10px;
		margin-right: 30px;
		margin-bottom: 40px;
		transition: all 2s;
	}

	#box:hover {
		box-shadow: 0 5px 5px rgba(0, 0, 0, .6), 0 5px 5px rgba(0, 0, 0, .5), 0 5px 5px rgba(0, 0, 0, .4)
	}

	.rou {
		display: block;
		width: 300px;
		height: 300px;
		margin: 0 auto;
		padding-left: 30px;
		box-sizing: border-box;
		/* background-color: yellow; */
	}

	.rou div:first-of-type {
		width: 100%;
		height: 40px;
		/* 		background-color: #99A9BF; */
		line-height: 40px;
		font-size: 15px;
		color: #000;
	}

	.rou img {
		width: 100%;
		height: 260px;
		/* background-color: red; */
	}

	.money-father {
		width: 100%;
		padding-left: 45px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		img{
			cursor: pointer;
		}
	}
</style>
